<template>
    <div class="quick-nav">
        <van-grid :column-num="4" :border="false">
            <van-grid-item v-for="(item, index) in navItems" :key="index" @click="onNavClick(item.path)">
                <template #icon>
                    <div class="nav-icon" :style="{ background: item.bgColor }">
                        <van-icon :name="item.icon" :color="item.iconColor" size="24" />
                    </div>
                </template>
                <template #text>
                    <span class="nav-text">{{ item.text }}</span>
                </template>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'


const router = useRouter()

const navItems = [
    {
        text: '找医院',
        icon: 'hotel-o',
        path: '/hospitals',
        bgColor: '#E6F3FF',
        iconColor: '#0080FF'
    },
    {
        text: '找科室',
        icon: 'records',
        path: '/departments',
        bgColor: '#E8F8F0',
        iconColor: '#07C160'
    },
    {
        text: '找医生',
        icon: 'manager-o',
        path: '/doctors',
        bgColor: '#FFF3E6',
        iconColor: '#FF8200'
    },
    {
        text: '我的预约',
        icon: 'calendar-o',
        path: '/appointments',
        bgColor: '#FFE6E6',
        iconColor: '#EE0A24'
    }
]

const onNavClick = (path: string) => {
    router.push(path)
}
</script>

<style scoped lang="scss">
.quick-nav {
    margin: 0px 6px;
    padding: 8px 0;
    background: #fff;

    :deep(.van-grid-item__content) {
        padding: 12px 8px;
    }

    .nav-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        margin-bottom: 8px;
    }

    .nav-text {
        font-size: 14px;
        color: #333;
    }
}
</style>